<template>
  <panel :title="title">
    <el-form
      :model="goodsAddForm"
      :rules="rules"
      ref="goodsAddForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 商品名称 -->
      <el-form-item label="商品名称" prop="name" class="goods-name">
        <el-input v-model="goodsAddForm.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <!-- 商品分类 -->
      <el-form-item label="商品分类" prop="category">
        <el-select v-model="goodsAddForm.category" placeholder="请选择商品分类">
          <el-option :value="cate.cateName" v-for="(cate, index) in categories" :key="index"></el-option>
        </el-select>
      </el-form-item>

      <!-- 商品价格 -->
      <el-form-item label="商品价格" required>
        <el-input-number
          v-model="goodsAddForm.price"
          @change="handleChange"
          :min="0"
          :max="100"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <!-- 商品图片 -->
      <el-form-item label="商品图片" required>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="goodsAddForm.imgUrl" :src="API + goodsAddForm.imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 商品描述 -->
      <el-form-item label="商品描述" prop="goodsDesc" class="goods-desc">
        <el-input type="textarea" v-model="goodsAddForm.goodsDesc"></el-input>
      </el-form-item>
      <!-- 添加商品按钮 -->
      <el-form-item>
        <el-button type="warning" @click="submitForm('goodsAddForm')"
          >添加商品</el-button
        >
      </el-form-item>
    </el-form>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";

// 引入ajax工具函数
import {queryCate, addGoods} from '@/api/goods'

export default {
  components: {
    Panel,
  },
  data() {
    return {
      title: "商品添加",
      API: 'http://127.0.0.1:5000',
      goodsAddForm: {
        name: "",
        category: "",
        goodsDesc: "",
        price: 0,
        imgUrl: '',
      },
      num: 1,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        category: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        goodsDesc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      categories: []
    };
  },
  methods: {
    handleChange(num) {
      console.log(num);
    },
    async submitForm() {
      try {
        this.goodsAddForm.imgUrl = this.goodsAddForm.imgUrl.substr(23)
        let res = await addGoods(this.goodsAddForm)
        if (res.data.code === 0) {
          this.$router.push('/goods/goods-list')
        }
        console.log(res)
      }catch(err) {
        console.log(err)
      }
    },
    handleAvatarSuccess(data) {
      let {code, imgUrl} = data
      if(code === 0) {
        this.goodsAddForm.imgUrl = imgUrl
      }
    },
    

    // 获取商品分类选项
    async getCategoryName() {
      try {
        let res = await queryCate();
        this.categories = res.data.categories
      }catch(err) {
        console.log(err)
      }
    }
  },
  created() {
    this.getCategoryName()
  }
};
</script>

<style lang="less" scoped>
.goods-name {
  /deep/.el-input__inner {
    width: 300px;
  }
}

.goods-desc {
  /deep/.el-textarea__inner {
    width: 300px;
  }
}

 .avatar-uploader {
   /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
   }
    /deep/.el-upload:hover {
    border-color: #409EFF;
  }
 }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>